<template>
  <base-virtual-table
    ref="baseVirtualTableRef"
    :loading="loading"
    :columns="tableColumns"
    :height="600"
    :data-source="list"
    row-key="id"
    border
    lazy
    :load="onLoad"
    :tree-props="{ hasChildren: 'children' }"
  >

    <template #action="scope">
      <base-icon-button icon="el-icon-edit" text="编辑" @click="onEdit(scope.row)"></base-icon-button>
      <base-icon-button icon="el-icon-delete" text="删除" @click="onDelete(scope.row)"></base-icon-button>
    </template>
  </base-virtual-table>
</template>

<script>
const tableColumns = [
  { dataIndex: 'id', title: '编号', width: 180, fixed: 'left' },
  { dataIndex: 'text', title: '名称' },
  { dataIndex: 'text2', title: '内容省略' },
  { dataIndex: 'action', title: '操作', width: 120, fixed: 'right', scopedSlots: { customRender: 'action' } },
];


export default {
  data() {
    return {
      loading: false,
      list: [],
      tableColumns,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;
      this.list = [];
      setTimeout(() => {
        this.list = [];
        for (let i = 1; i < 2000; i++) {
          const text = this.getRandomContent();
          const text2 = this.getRandomContent();
          this.list.push({
            id: i,
            show: false,
            text,
            text2,
            parentId: null,
            children: [
              {
                id: i + '_1',
                text: this.getRandomContent(),
                text2: this.getRandomContent(),
                parentId: i,
                children: [
                  {
                    id: i + '_3',
                    text: this.getRandomContent(),
                    text2: this.getRandomContent(),
                    parentId: i + '_1',
                  },
                ],
              },
              {
                id: i + '_2',
                text: this.getRandomContent(),
                text2: this.getRandomContent(),
                parentId: i,
              },
            ],
          });
        }
        this.loading = false;
      }, 2000);
    },

    /**
     * 随机生成文本内容
     * @return {string}
     */
    getRandomContent() {
      const content = [
        '这是一条测试数据',
        '君不见黄河之水天上来，奔流到海不复回。',
        '十年生死两茫茫',
        '寻寻觅觅，冷冷清清，凄凄惨惨戚戚。',
        '桃花坞里桃花庵，桃花庵里桃花仙；桃花仙人种桃树，又摘桃花卖酒钱。',
        '明月几时有，把酒问青天。',
        '槛菊愁烟兰泣露，罗幕轻寒，',
        '寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。多情自古伤离别，更那堪冷落清秋节！今宵酒醒何处？杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说？',
        '红豆生南国，春来发几枝。',
        '黄鹂',
      ];
      const i = Math.floor(Math.random() * 10);
      return content[i];
    },

    /**
     * 数据懒加载
     * 注意：非懒加载的树结构需要写成懒加载的形式，否则树展开后，来回滚动会导致展开树重置为未展开状态
     * @param tree
     * @param treeNode
     * @param resolve
     * @return {*}
     */
    onLoad(tree, treeNode, resolve) {
      resolve(tree.children);
    },

    /**
     * 编辑
     */
    onEdit(record) {
      console.log('编辑 => ', JSON.parse(JSON.stringify(record)));
    },

    /**
     * 删除
     */
    onDelete(record) {
      console.log('删除 => ', JSON.parse(JSON.stringify(record)));
    },
  },
};
</script>

<style lang="scss" scoped></style>
